import React, { Component } from "react";
import { withRouter } from "react-router-dom";
import { getSearchList } from "../../data/api";
import styles from "./Search.module.scss";
class Search extends Component {
  state = {
    searchList: [],
  };
  async componentDidMount() {
    let res = await getSearchList("");
    this.setState({
      searchList: res.data.records,
    });
  }
  async onKeyDownchange(e) {
    if (e.keyCode === 13) {
      let val = e.target.value;
      //console.log(val);
      let res = await getSearchList(val);
      console.log(res.data.records);
      this.setState({
        searchList: res.data.records,
      });
    }
  }
  handleGoodsClick = (params) => {
    this.props.history.push("/goodsDetail?" + params);
  };
  render() {
    return (
      <div className={styles.xmSearch}>
        <div className={styles.searchHeader}>
          <div className={styles.searchBar}>
            <i className={"iconfont icon-fangdajing " + styles.searchIcon}></i>
            <input
              type="text"
              placeholder="搜商品名称"
              onKeyDown={(e) => this.onKeyDownchange(e)}
            />
          </div>
        </div>
        <div className={styles.hotGoods}>热门商品</div>
        <div className={styles.searchContent}>
          {this.state.searchList.map((v) => {
            return (
              v.pic ? <div
              className={styles.searchContentItem}
              key={v.id}
              onClick={this.handleGoodsClick.bind(this, v.id)}
            >
              <div className={styles.contentItemLeft}>
                <img
                  src={
                    v.pic ? "http://linjiashop.microapp.store/prod-api/file/getImgStream?idFile=" + v.pic : ""
                  }
                  alt=""
                />
              </div>
              <div className={styles.contentItemRight}>
                <div className={styles.ItemRightTop}>
                  <p>{v.name}</p>
                  <p className={styles.p2}>{v.descript}</p>
                </div>
                <div className={styles.ItemRightBottom}>
                  <span>￥{(parseInt(v.price) / 100).toFixed(2)}</span>
                </div>
              </div>
            </div>
          : "");
          })}
        </div>
      </div>
    );
  }
}
export default withRouter(Search);
